<template>
    <div id="signIn">
        <Headers :title="$t('signIn.title')" />
        <div class="signIn-container">
            <commonBg>
                <div class="signIn-btn" @click="signIn">
                    <p v-if="isSignIn">{{$t('signIn.signActive')}}</p>
                    <p v-if="!isSignIn">{{$t('signIn.signInNo')}}</p>
                </div>
                <div class="signIn-day">
                    <p>
                        {{$t('signIn.signInDay')}}
                        <span>{{day}}</span>
                        {{$t('signIn.day')}}
                    </p>
                </div>
            </commonBg>
        </div>
        <div class="calendar">
            <Calendar :markDate="dateArr" />
        </div>
    </div>
</template>

<script>
import Calendar from 'vue-calendar-component';
import commonBg from 'components/CommonBg'
    export default {
        name:'signIn',
        data () {
            return {
                isSignIn:false,
                day:3,
                dateArr:['2019/5/11', '2019/5/10']
            }
        },
        components:{
            commonBg,
            Calendar
        },
        methods:{
            signIn() {
                // 请求签到接口
                this.isSignIn = true
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl';
#signIn
    positCenter(0,0,0,0,0,0)
    width 100%
    background-color $bodyBg
    .signIn-container
        .bank_asset
            margin-top rem(79)
            height rem(230)
            .signIn-btn
                bgImg('../../assets/signIn_btnbg.png', contain)
                width rem(206)
                height rem(149)
                margin rem(5) auto
                p
                    text-align center
                    line-height rem(140)
                    color $fontColor
                    font-size rem(18)
                    margin-left rem(-8)
            .signIn-day
                margin-top rem(16)
                text-align center
                p
                    font-size rem(15)
                    color $fontColor
                    span
                        font-size rem(20)
                        color $btnColor
    .calendar
        box-sizing border-box
        padding 0 rem(14)
        margin-top rem(34)
</style>
